<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景</title>

        <style type="text/css">
            .wrapper {
                width: 80% ;
                height: 400px ;
                border: 1px solid blue ;
                background-color: #dedede ;
                background-image: url( '/images/moon-cake.jpg' ) ; /* 设置背景图像的路径 */
                /* repeat | repeat-x | repeat-y | no-repeat */
                background-repeat: no-repeat ; /* 控制背景图像的重复方式 */
                background-position: center ; /* 单独设置背景图像的位置 */
                margin: 15px auto ;
            }

            .first { background-size: 100% 100% ; /* 单独设置背景图像的尺寸 ( 宽度 高度 ) */  }
            .second { background-size: 100% ; /* 如果仅设置 宽度值，则高度会等比例 缩放 */  }

            .third { background-size: contain ; /* contain 表示元素需要容纳整个背景图像 (元素可能会有部分区域不被背景图像覆盖) */ }
            .fourth { background-size: cover ; /* cover 表示背景图像覆盖整个元素 (背景图像可能会有部分区域不显示) */ }
            .fifth { background-size: 500px 200px ; /* 单独设置背景图像的尺寸 ( 宽度 高度 ) */ }

            .sixth {
                width: 267px ;
                height: 267px ;
                background-position: 5px -5px ;
                border-radius: 50% ;
                background-color: #ffffff ;
                box-shadow: 0 0 0px 15px #ffffff inset ;
            }

        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth"></div>

        <div class="wrapper fifth"></div>

        <div class="wrapper sixth"></div>

    </body>
</html>